<template>
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="max-w-lg w-full text-center">
      <!-- 404 Animation -->
      <div class="mb-8">
        <div class="relative">
          <!-- Background glow -->
          <div class="absolute inset-0 animate-pulse">
            <div class="w-32 h-32 mx-auto bg-gradient-primary rounded-full opacity-20 blur-xl"></div>
          </div>
          
          <!-- Main 404 -->
          <div class="relative">
            <h1 class="text-8xl md:text-9xl font-bold text-gradient animate-bounce-gentle">
              404
            </h1>
          </div>
        </div>
      </div>

      <!-- Error message -->
      <div class="space-y-4 mb-8">
        <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100">
          页面未找到
        </h2>
        <p class="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
          抱歉，您访问的页面不存在或已被移动。让我们帮您找到正确的方向。
        </p>
      </div>

      <!-- AI Assistant suggestion -->
      <div class="card glass-effect mb-8">
        <div class="p-6">
          <div class="flex items-center justify-center mb-4">
            <div class="w-12 h-12 bg-gradient-primary rounded-xl flex items-center justify-center glow-effect">
              <CpuChipIcon class="w-6 h-6 text-white" />
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
            AI助手建议
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            我注意到您可能在寻找特定功能。我可以帮您快速找到需要的内容。
          </p>
          <button
            @click="askAI"
            class="btn-primary w-full"
            :disabled="loading"
          >
            <div v-if="loading" class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
            <ChatBubbleOvalLeftEllipsisIcon v-else class="w-4 h-4 mr-2" />
            询问AI助手
          </button>
        </div>
      </div>

      <!-- Quick actions -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <router-link
          to="/"
          class="p-4 rounded-lg border border-gray-200 dark:border-dark-600 hover:border-primary-500 dark:hover:border-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all duration-200 group"
        >
          <HomeIcon class="w-6 h-6 mx-auto mb-2 text-gray-400 group-hover:text-primary-500" />
          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
            返回首页
          </div>
        </router-link>

        <router-link
          to="/chat"
          class="p-4 rounded-lg border border-gray-200 dark:border-dark-600 hover:border-primary-500 dark:hover:border-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all duration-200 group"
        >
          <ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6 mx-auto mb-2 text-gray-400 group-hover:text-primary-500" />
          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
            AI对话
          </div>
        </router-link>

        <router-link
          to="/history"
          class="p-4 rounded-lg border border-gray-200 dark:border-dark-600 hover:border-primary-500 dark:hover:border-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/10 transition-all duration-200 group"
        >
          <ClockIcon class="w-6 h-6 mx-auto mb-2 text-gray-400 group-hover:text-primary-500" />
          <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
            历史记录
          </div>
        </router-link>
      </div>

      <!-- Helpful suggestions -->
      <div class="text-left">
        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
          您可能在寻找：
        </h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
          <li class="flex items-center">
            <ChevronRightIcon class="w-4 h-4 mr-2 text-primary-500" />
            数据查询和分析功能
          </li>
          <li class="flex items-center">
            <ChevronRightIcon class="w-4 h-4 mr-2 text-primary-500" />
            业务报表生成工具
          </li>
          <li class="flex items-center">
            <ChevronRightIcon class="w-4 h-4 mr-2 text-primary-500" />
            系统配置和设置选项
          </li>
          <li class="flex items-center">
            <ChevronRightIcon class="w-4 h-4 mr-2 text-primary-500" />
            AI智能助手对话界面
          </li>
        </ul>
      </div>

      <!-- Footer -->
      <div class="mt-12 pt-6 border-t border-gray-200 dark:border-dark-700">
        <p class="text-xs text-gray-500 dark:text-gray-400">
          如果问题持续存在，请联系系统管理员
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app'

// Icons
import {
  CpuChipIcon,
  ChatBubbleOvalLeftEllipsisIcon,
  HomeIcon,
  ClockIcon,
  ChevronRightIcon
} from '@heroicons/vue/24/outline'

const router = useRouter()
const appStore = useAppStore()

const loading = ref(false)

const askAI = async () => {
  loading.value = true
  
  // Simulate AI processing
  setTimeout(() => {
    // Redirect to chat with a helpful message
    router.push({
      path: '/chat',
      query: { 
        message: '我刚才访问了一个不存在的页面，能帮我找到我需要的功能吗？'
      }
    })
    
    appStore.showInfo('正在为您连接AI助手...')
    loading.value = false
  }, 1500)
}
</script>

<style scoped>
.glass-effect {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.animate-bounce-gentle {
  animation: bounceGentle 3s ease-in-out infinite;
}

@keyframes bounceGentle {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
</style>
